<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>像素鸟</title>
    <script src="js/jquery-1.12.4.js"></script>s
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        a {
            text-decoration: none;
        }

        #game {
            position: relative;
            width: 800px;
            height: 600px;
            overflow: hidden;
            margin: 150px auto;
            background: url(images/sky.png);
        }

        #bird {
            position: absolute;
            top: 300px;
            left: 50px;
            width: 34px;
            height: 25px;
            background: url(images/birds.png) -10px -8px no-repeat;
        }

        #start {
            /* display: none; */
            position: absolute;
            font-size: 60px;
            height: 70px;
            line-height: 70px;
            border-radius: 5px;
            z-index: 999;
            background-color: rgb(248, 244, 196);
            border: none;
            outline: none;
            top: 264px;
            left: 292px;
        }

        #select {
            position: absolute;
            top: 357px;
            left: 383px;
        }

        #select select {
            height: 30px;
            padding-left: 5px;
            font-size: 18px;
            background-color: rgb(248, 244, 196);
        }

        #end {
            display: none;
            position: absolute;
            font-size: 60px;
            height: 70px;
            line-height: 70px;
            border-radius: 5px;
            z-index: 999;
            background-color: rgb(248, 244, 196);
            border: none;
            outline: none;
            color: red;
            top: 264px;
            left: 292px;
        }

        #score {
            position: fixed;
            top: 100px;
            font-size: 40px;
            color: rgb(2, 0, 0);
        }
    </style>
</head>

<body>
    <audio src="audio/Old Threads.mp3" id='bgMusic'></audio>
    <audio src="audio/sb_01.mp3" id='sbMusic'></audio>
    <div id="game">
        <button id="start">开始游戏</button>
        <button id='end'>再来一次</a></button>
        <div id="score">分数：0</div>
        <div id="select">
            <select name="" id="sel">
                <option value="0">简单</option>
                <option value="1">普通</option>
                <option value="2">困难</option>
            </select>
        </div>
        <div id="bird"></div>
    </div>
    <script>
        // 让小鸟飞起来
        // 水平方向是移动的背景 竖直方向上改变的是top值
        var game = document.getElementById('game');
        var birdEle = document.getElementById('bird');

        // 初始化背景图的值

        var sky = {
            x: 0
        }

        // 初始化小鸟的值

        var bird = {
            // 速度(步长)
            speedX: 5,
            speedY: 0,
            // 坐标
            x: birdEle.offsetLeft,
            y: birdEle.offsetTop
        }
        // 游戏的状态
        var running = false;
        var speed = 0; // 初始速度为0毫秒
        // running = true;
        // 点击开始游戏按钮开始游戏
        var start = document.getElementById('start');
        start.addEventListener('click', function () {
            // 开始背景音乐
            var bgMusic = document.querySelector('#bgMusic');
            bgMusic.play();
            start.style.display = 'none';
            // 开始游戏后获取下拉表单的难度
            // 0简单 pipe.x+= 1
            // 1普通 pipe.x+= 4
            // 2困难 pipe.x+= 6
            var sel = document.getElementById('sel');
            var select = document.getElementById('select');
            select.style.display = 'none';
            var index = sel.value;
            console.log(index);
            if (index == 0) {
                speed = 2;
            } else if (index == 1) {
                speed = 4;
            } else {
                speed = 6;
            }
            running = true;
        })
        // 游戏结束时显示游戏结束
        function end() {
            var end = document.getElementById('end');
            end.onclick = function () {
                // 重新刷新页面
                location.reload();
            }
            end.style.display = 'block';
        }
        // 小鸟运动
        setInterval(function () {
            if (running) {
                // 移动背景让小鸟实现水平运动
                sky.x -= 2; //加上小鸟的速度
                game.style.backgroundPositionX = sky.x + 'px';
                // 分数就是背景移动的距离
                // 因为难度是根据管道刷新速度 所有根据难度要乘以倍数 1* 2* 3*
                var score = document.getElementById('score');
                if (speed == 2) {
                    score.innerHTML = '分数：' + (-sky.x);
                } else if (speed == 4) {
                    score.innerHTML = '分数：' + (-sky.x * 2);
                } else {
                    score.innerHTML = '分数：' + (-sky.x * 3);
                }

                // 实现小鸟的上下运动
                bird.speedY += 1; //类似加速度
                bird.y += bird.speedY;
                // 判断小鸟是否触碰上下边界
                if (bird.y < 0) {
                    end();
                    running = false;
                    bird.y = 0;
                }
                if (bird.y + birdEle.offsetHeight > 600) {
                    end();
                    running = false;
                    bird.y = 600 - birdEle.offsetHeight;
                }
                birdEle.style.top = bird.y + 'px';
            }

        }, 30)

        // 点击文档实现小鸟向上运动

        document.onclick = function () {
            // 每点击一次播放音效
            var sbMusic = document.getElementById('sbMusic');
            sbMusic.play();
            bird.speedY = -10;
        }

        // 创建管道
        function createPope(position) {
            var pipe = {};
            pipe.x = position;
            // 规定上管道的高度为200-300之间
            pipe.uHeight = 200 + parseInt(Math.random() * 100);
            pipe.dHeight = 600 - pipe.uHeight - 200;
            pipe.dTop = pipe.uHeight + 200;
            // 上管道
            var uPipe = document.createElement('div');
            uPipe.style.width = '52px';
            uPipe.style.height = pipe.uHeight + 'px';
            uPipe.style.background = 'url(images/pipe2.png) no-repeat center bottom';
            uPipe.style.position = 'absolute';
            uPipe.style.top = 0;
            uPipe.style.left = pipe.x + 'px';
            game.appendChild(uPipe);
            // 下管道
            var dPipe = document.createElement('div');
            dPipe.style.width = '52px';
            dPipe.style.height = pipe.dHeight + 'px';
            dPipe.style.background = 'url(images/pipe1.png) no-repeat center top';
            dPipe.style.position = 'absolute';
            dPipe.style.top = pipe.dTop + 'px';
            dPipe.style.left = pipe.x + 'px';
            game.appendChild(dPipe);
            // 让管道运动起来
            setInterval(function () {
                // 判断游戏状态
                if (running) {
                    // pipe.x -= 2;
                    // 动态修改速度修改的是每次递增的x
                    pipe.x -= speed;
                    uPipe.style.left = pipe.x + 'px';
                    dPipe.style.left = pipe.x + 'px';
                    // 当第一个管道到达左边界时 重新开始循环创建管道
                    // 但必须从距离800开始
                    if (pipe.x < -52) {
                        pipe.x = 800;
                    }
                    // 判断小鸟是否触碰管道
                    var uFeel = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 &&
                        bird.y < pipe.uHeight;
                    var dFeel = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 &&
                        bird.y > pipe.uHeight + 200 - 30;
                    if (uFeel || dFeel) {
                        end();
                        running = false;
                    }

                }
            }, 10)
        }
        // 每组管道间隔200
        createPope(400);
        createPope(600);
        createPope(800);
        createPope(1000);
    </script>
</body>

</html>